import { useRef, useState } from 'react'
import Slider from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

const ImagePredict = (props) => {
  const { sliderList } = props
  const sliderRef = useRef(null)
  const itemsPerPage = 3
  const [currentPage, setCurrentPage] = useState(0)
  const totalPages = Math.ceil(6 / itemsPerPage)
  //轮播图
  const settings = {
    dots: false,
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 3,
  }

  const handlePageClick = (page) => {
    setCurrentPage(page)
  }

  const handlePrevClick = () => {
    if (currentPage > 0) {
      setCurrentPage(currentPage - 1)
    }
  }

  const handleNextClick = () => {
    if (currentPage < totalPages - 1) {
      setCurrentPage(currentPage + 1)
    }
  }

  const renderPageNumbers = () => {
    const pageNumbers = []
    for (let i = 0; i < totalPages; i++) {
      pageNumbers.push(
        <span
          key={i}
          style={{
            color: currentPage === i ? 'blue' : 'black',
            cursor: 'pointer',
          }}
          onClick={() => handlePageClick(i)}
        >
          案例{i + 1}
        </span>
      )
    }
    return pageNumbers
  }

  const renderSlides = () => {
    const startIndex = currentPage * itemsPerPage
    const endIndex = startIndex + itemsPerPage
    const currentData = sliderList.slice(startIndex, endIndex)
    // return currentData.map((item, index) => (
    //   <div key={index}>
    //     <img src={item.imgPath} alt="carousel-img" />
    //     <p>Image Prediction: {item.img_predict_res[0]}</p>
    //     <p>Adv Prediction: {item.adv_predict_res[0]}</p>
    //     <p>Def Prediction: {item.def_predict_res[0]}</p>
    //   </div>
    // ))
    return <div>dddd</div>
  }

  return (
    <div>
      <Slider {...settings}>{renderSlides()}</Slider>
      <div style={{ textAlign: 'center' }}>
        <span
          style={{ cursor: currentPage > 0 ? 'pointer' : 'not-allowed' }}
          onClick={handlePrevClick}
        >
          {'<'}
        </span>
        {renderPageNumbers()}
        <span
          style={{
            cursor: currentPage < totalPages - 1 ? 'pointer' : 'not-allowed',
          }}
          onClick={handleNextClick}
        >
          {'>'}
        </span>
      </div>
    </div>
  )
}

export default ImagePredict
